<template>
  <div>
    <el-dialog
      :model-value="props.RoleVisibleRole"
      title="分配角色"
      :before-close="cloeFn"
    >
      <el-select
        v-model="roleIds"
        multiple
        placeholder="请选择"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      {{ id }}
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelFn">取消</el-button>
          <el-button type="primary" @click="confirmFn"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const roleIds = ref<number[]>([]);
let options: any = [];
const props = withDefaults(
  defineProps<{
    RoleVisibleRole: boolean;
    id: number;
  }>(),
  {
    RoleVisibleRole: false,
    id: 0,
  }
);
// 子传父,
const emit = defineEmits<{
  (event: "cancel"): void;
  (event: "confirm"): void;
}>();
//取消
const cancelFn = () => {
  emit("cancel");
};
//确认
function confirmFn() {
  emit("confirm"); //关闭
}
//关闭之前执行
const cloeFn = () => {
  emit("cancel");
};

// //请求所有的角色
// http.role.getAllRoleList().then((res) => {
//   console.log("发请求结果：", res);
//   options = res.data;
// });
</script>

<style scoped></style>
